<template>
    <div id="chart_main"></div>
</template>
<script>
import { getGrades } from '@/utils/urlManager';
import axios from 'axios';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            gradeData: [],
            subjectData: []
        }
    },
    mounted() {
        this.getGrades()
    },
    methods: {
        getGrades() {
            axios.get(getGrades)
                .then((response) => {
                    if (response.data.data != null) {
                        const AllGrade = response.data.data;
                        const subjects = AllGrade[0].subjects.split(',').map(subject => subject.trim());
                        this.subjectData = subjects;
                        // 初始化gradeData数组，确保每个科目都有一个对象
                        this.gradeData = subjects.map(subject => ({
                            name: subject,
                            type: 'line',
                            step: 'middle',
                            data: []
                        }));
                        // 填充每个学期的成绩
                        for (let index = 0; index < AllGrade.length; index++) {
                            const element = AllGrade[index];
                            const grades = element.grades.split(',').map(grade => grade.trim());
                            for (let i = 0; i < grades.length; i++) {
                                this.gradeData[i].data.push(Number(grades[i]));
                            }
                        }

                        this.StepLine();
                    } else {
                        this.$message.warning("获取总成绩失败~~");
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.$message.error(err);
                })
        },
        StepLine() {
            var chartDom = document.getElementById('chart_main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '各科成绩走向'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.subjectData
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['第一学期', '第二学期', '第三学期', '第四学期', '第五学期', '第六学期']
                },
                yAxis: {
                    type: 'value'
                },
                series: this.gradeData
            };

            option && myChart.setOption(option);
        }
    }
}
</script>

<style>
#chart_main {
    width: 98%;
    height: 100%;
}
</style>